<template>
  <a-modal
    title="操作"
    :width="800"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
          
        <a-form-item
          label="字段类型"
          :labelCol="{span: 4}"
          :wrapperCol="{span: 20}"
        >
          <mySelect
            ref="cu"
            :v-model.sync="cu"
            @change="handleSelChange"
            v-decorator="['nType', {rules: [{required: true, message: '请选择字段类型！'}]}]"
            :settings="{url:'cutSedSettingPerson/getTextType', showSearch : true, allowClear : true}"/>
        </a-form-item>
        <a-form-item
          v-if="editable"
          label="数据字典"
          :labelCol="{span: 4}"
          :wrapperCol="{span: 20}"
        >
          <mySelect
            ref="cu1"
            :v-model.sync="cu1"
          
            v-decorator="['dictionary', {rules: [{required: true, message: '请选择数据字典！'}]}]"
            :settings="{url:'cutDictionary/getAll', showSearch : true, allowClear : true}"/>
        </a-form-item>
        <a-form-item
          label="编码"
          :labelCol="{span: 4}"
          :wrapperCol="{span: 20}"
        >
          <a-input v-decorator="['code', {rules: [{required: true, message: '请输入名称!'}]}]" />
        </a-form-item>
        <a-form-item
          label="名称"
          :labelCol="{span: 4}"
          :wrapperCol="{span: 20}"
        >
          <a-input v-decorator="['name', {rules: [{required: true, message: '请输入名称!'}]}]" />
        </a-form-item>
        <a-form-item
          label="是否必填"
          :labelCol="{span: 4}"
          :wrapperCol="{span: 20}"
        >
          <a-checkbox :checked="checkRequired" @change="handleChange"/>
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>


<script>
import pick from 'lodash.pick'
  import mySelect from '../../myComponent/MySelect'

  import {
    postAxiosUrl,
    getUrl
  } from '@/api/manage'
export default {
  components:{
    mySelect },
  data () {
    return {
      id : '',
      checked : false,
      parentId :'',
      visible: false,
      editable: false,
      checkRequired: false,
      confirmLoading: false,
      sedData : [],
      cu: [],
      cu1: [],
      form: this.$form.createForm(this),
    }
  },
  created () {
  },
  methods: {
  add (parentId) {
    this.id = ''
    this.parentId = parentId
    this.form.resetFields()
    this.visible = true
    this.editable = false
    this.$nextTick(() => {
       this.$refs.cu.setValue('1')
    })
   
  },
  edit (record) {
     const { form: { setFieldsValue } } = this
     this.visible = true
     const me = this
      this.$nextTick(() => {
      me.id = record.id
      me.parentId = record.setting_id
       setFieldsValue(pick(record, ['name']))
       setFieldsValue( {code: record.code})
       
       this.$refs.cu.setValue(record.n_type)
       if(record.is_required == '1'){
         this.checkRequired = true
       }else{
         this.checkRequired = false
         
       }
       if(record.n_type == '4'){
         this.editable = true
         this.$nextTick(() => {
           this.$refs.cu1.setValue(record.dictionary)
         })
       }
    })
    
  },
  close () {
      this.$emit('close')
        this.$refs.cu.clear()
      this.visible = false
  },
  handleCancel () {
      this.close()
  },
  handleOk () {
      const _this = this
      
      // 触发表单验证
      this.form.validateFields((err, values) => {
        // 验证表单没错误
        if (!err) {
          console.log('form values', values)
          _this.confirmLoading = true
         values.id = this.id
         values.settingId = this.parentId
         values.isRequired = this.checkRequired ? '1' : '0'
         postAxiosUrl('cutSedSettingPerson/save', values)
           .then(data => {
              if(!data.success){
                 _this.$message.warning(data.error)
                 _this.confirmLoading = false
               }else{
                 _this.visible = false
                 _this.confirmLoading = false
                 _this.$emit('ok', this.parentId)
               }           
             })
        }
      })
    },
    filterOption(input, option) {
          return (
            option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
          )
    },
    handleSelChange(e){
      if(e == 4){
        this.editable = true
      }else{
         this.editable = false
      }
    },
    handleChange(e) {
        this.checkRequired = e.target.checked
    },
  }
}
</script>

<style>
</style>
